<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
 <head>
  
  <link rel="stylesheet" href="plug-in/tools/css/metrole/common.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="plug-in/uploadify/jquery.uploadify-3.1.js"></script>
  <script src="js/jq-signature.js"></script>
  <script type="text/javascript">
  	
  </script>
  <style>
    body{
    	background-color:rgb(248,249,251);    	
    }
  	.panelTitle{
  		color:#1aad19;
  		line-height: 40px;
    	height: 40px;
    	font-size: 16px;
    	text-align:center;
    	border-bottom:1px solid #e6e7ea;
    	margin-bottom:50px;
  	}
  	
  	.selectList a{
  		text-decoration: underline;
  	}
  	
  	.container{
  		background-color: white;
  		width: 80%;
    	max-width: 1280px;
    	margin: 0 auto;
    	min-height: 500px;
  	}
  	
  	.demoTable{
  		border-collapse: collapse;  		
  	}
  	
  	.demoTable td{
  		padding-bottom: 30px;
  	}
  	
  	.demoTable .tdTitle{
  		padding-right:10px;  		
  	}
  	
  	.inputxt{
  		height:30px;
  		width:80px;  		
  		text-align: right;
  	}  
  	
  	.signTD{
  		width:100px;
  		border-bottom:1px solid black;
  	}
  	
  	#file_upload-queue{
  		display:none;
  	}
  	button[disabled=true]{
  		background-color: gray;
  		background-color: gray !important;
   	 	background-image: none;
    	border: white;
  	}
  </style>
 </head>
 <body>
 <div class="container" style="padding-top:50px;padding-left:30px;">
 <!-- <div class="panelTitle">
 	请输入信息
 </div> --> 
		<table  class="demoTable">
				<tr>
					<td style="text-align:right;">
						日期
					</td>
					<td colspan="2" style="text-align: center">
						2017/07-2017/09
					</td>
					<td colspan="2" style="text-align: center">
<!-- 						<input type="file" name="file_upload" id="file_upload">
 -->					</td>
				</tr>
				<tr>
					<td align="right" style="width:100px;" class="tdTitle">					
					</td>
					<td style="width:130px;text-align: right">数额</td>
					<td style="width:130px;text-align: right;">增值税</td>
					<td style="width:130px;text-align: right">净额</td>
					<td style="width:130px;text-align: right;">备注</td>					
				</tr>
				<tr>
					<td align="right" style="width:100px;text-align: right" class="tdTitle">
						<label class="Validform_label">
							销售额:
						</label>
					</td>
					<td class="value" style="text-align: right">${apply.sellAmount}</td>
					<td class="value" style="text-align: right;">${apply.sellAmountTax}</td>
					<td class="value" style="text-align: right">						 	 
						${apply.sellAmount-apply.sellAmountTax}
					</td>
					<td class="value" style="text-align: right">						 	 
						<input class="inputxt" type="text" id="input2" value="">
					</td>
					
				</tr>
				<tr>
					<td align="right" class="tdTitle">
						<label class="Validform_label">
							开支:
						</label>
					</td>
					<td class="value" style="text-align: right">${apply.spendAmount}</td>
					<td class="value" style="text-align: right;">${apply.spendAmountTax}</td>
					<td class="value" style="text-align: right">						 	 
						${apply.spendAmount-apply.spendAmountTax}
					</td>
					<td class="value" style="text-align: right">						 
						<input class="inputxt" type="text" id="input2" value="">	 
					</td>
				</tr>
				<tr>
					<td align="right" class="tdTitle">
						<label class="Validform_label">
							利润:
						</label>
					</td>
					<td class="value" style="text-align: right">${apply.balance}</td>
					<td class="value" id="balanceTax" style="text-align:right;"></td>
					<td class="value" style="text-align: right" id="balanceAmount">${apply.balance}</td>
					<td class="value" style="text-align: right"><input class="inputxt" type="text" id="input2" value=""></td>
				</tr>								
 			</table> 
 			<table>
 				<tr>
 					<td>签名：</td>
 					<td class="signTD">
 						<c:choose>
 							<c:when test="${apply.signAttachId != null}">
 								<img id="signImg" style="height:40px;" src="cms-attach.do?getByOwner&ownerId=${apply.id}">
 							</c:when>
 							<c:otherwise>
 								<img id="signImg" style="height:40px;">
 							</c:otherwise>
 						</c:choose> 
 						
 						<div class="js-signature"
						     data-width="400"
						     data-height="140"
						     data-border="1px dashed rgb(170, 170, 170)"
						     data-background="white"
						     data-line-color="black"
						     data-auto-fit="true">
						</div>    
 												
 					</td>
 					<td style="vertical-align: bottom;">
 						<button  class="btn btn_primary btn_input"  onclick="clearCanvas();">重写</button>
						<button id="saveBtn" disabled="true"  class="btn btn_primary btn_input"  onclick="saveSignature();" disabled>确认签名</button>     
 					</td>
 				</tr>
 				
 			</table>
	</div>
 </body>
 <script type="text/javascript"> 
 $(function() {
	 	//屏蔽上传签名图片
	   /* $('#file_upload').uploadify({
	    	"fileTypeExts":"*.jpg; *.png; *.gif",
	    	"buttonText":"上传签名",
	    	"buttonClass":"btn btn_primary btn_input",
	        'swf'      : 'plug-in/uploadify/uploadify.swf',
	        'uploader' : 'cms-attach.do?signUpload&ownerId=${apply.id}',
	        'onUploadSuccess':function(file, data, response){
	        	data = $.parseJSON(data);
	        	if(data.success){
	        		$('#signImg').attr("src","cms-attach.do?getByOwner&ownerId=${apply.id}");
	        		$('#confirmSign').show();
	        	}
	        },
	        'itemTemplate' : ''
	    }); */
	    
	    //改为手写
	    $('.js-signature').jqSignature();
	    $('.js-signature').on('jq.signature.changed', function() {
	    	  $('#saveBtn').attr('disabled', false);
	    }); 
	    
	 	cal();
	});
 
  
 function clearCanvas() {
	  $('.js-signature').jqSignature('clearCanvas');
	  $('#saveBtn').attr('disabled', true);
 }
 
 
 function saveSignature() {
	  var dataUrl = $('.js-signature').jqSignature('getDataURL');
	  if(confirm('确认签名无误，进行提交吗？')){
			 $.ajax({
				 url:"selectService.do?finishApply&id=${apply.id}",
				 type:"post",
				 data:{
					img:dataUrl 
				 },
				 success:function(d){
					 d = $.parseJSON(d);
					 alert(d.msg)
					 if(d.success){
						 window.location.href="selectService.do?goFinalPage&id=${apply.id}";
					 }
				 }
			 });
		 }
}
 
 
 function cal(){
	//计算balance的增值税
	var balance = ${apply.balance};
	var balanceTax = (balance/(1.0*11)).toFixed(2);
	$("#balanceTax").text(balanceTax);
	$('#balanceAmount').text(balance-balanceTax);
 }
 </script>
